<template>
  <!-- 发布的采购单 -->
  <div class="procurement">
    <div class="body">
      <div class="g-con">
        <div class="main">
          <div class="title flexsb">
            <div class="flexsc">
              {{ t('userCenter.t10') }}
            </div>
            <el-button
              type="primary"
              @click="openUrl('/procurement')"
            >
              {{ t('add') }}
            </el-button>
          </div>
          <div class="search flexsc">
            <div class="item">
              <el-input
                v-model="searchData.orderNo"
                :placeholder="t('invitationQuotation.attr1_2')"
              />
            </div>
            <div class="item">
              <el-select-v2
                v-model="searchData.shipId"
                :options="shipOptions"
                :placeholder="t('invitationQuotation.p2')"
                clearable
                filterable
              />
            </div>
            <el-button
              type="primary"
              @click="handleSearch"
            >
              {{ t('search') }}
            </el-button>
            <el-button
              type="primary"
              color="#252628"
              @click="handleReset"
            >
              {{ t('invitationQuotation.b2') }}
            </el-button>
          </div>
          <div class="g-order-list">
            <div
              class="li mt-2"
              v-for="item in listData"
              :key="item.id"
            >
              <div class="attr">
                <div class="item">
                  <span>{{ t('invitationQuotation.attr1_2') }}:</span>
                  <span>{{ item.orderNo }}</span>
                </div>
                <div class="item">
                  <span>{{ t('invitationQuotation.attr2_2') }}:</span>
                  <span>{{ item.procureOrderName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('userCenter.pattr1') }}:</span>
                  <span>{{ item.projectLargeName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('invitationQuotation.attr3') }}:</span>
                  <span>{{ item.createByName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('invitationQuotation.attr4') }}:</span>
                  <span>{{ dateFormat(item.createTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('userCenter.pattr2') }}:</span>
                  <span>{{ item.procureDetailCount || 0 }}{{ t('invitationQuotation.attr5_1') }}</span>
                </div>
                <div class="item">
                  <span>{{ t('invitationQuotation.attr7') }}:</span>
                  <span>{{ dateFormat(item.quotationEndTime) }}</span>
                </div>
                <div class="item">
                  <span>{{ t('userCenter.pattr3') }}:</span>
                  <span>{{ item.enterpriseName }}</span>
                </div>
                <div class="item">
                  <span>{{ t('invitationQuotation.attr9') }}:</span>
                  <span :class="item.orderStatusClass">{{ getDictLabel('order_status', item.orderStatus) }}</span>
                </div>
              </div>

              <!-- 0编辑中，2询价中，5已完成， -->
              <div class="bottom flexsb mt-3">
                <div class="">
                  <el-button
                    type="primary"
                    @click="open(item, 'view')"
                  >
                    {{ t('invitationQuotation.b3') }}
                  </el-button>
                  <el-button
                    v-if="['0'].includes(item.orderStatus) && isCreator(item)"
                    type="primary"
                    @click="open(item, 'edit')"
                  >
                    {{ t('userCenter.b2') }}
                  </el-button>
                  <el-button
                    v-if="['0', '2'].includes(item.orderStatus) && isCreator(item) && item.procureOrderName"
                    type="primary"
                    @click="open(item, 'inquiry')"
                  >
                    {{ t('userCenter.b6') }}
                  </el-button>
                  <el-button
                    type="primary"
                    v-if="item.orderStatus !== '0' && isCreator(item) && item.procureOrderName"
                    @click="viewQuotationRecord(item)"
                  >
                    {{ t('userCenter.b12') }}
                  </el-button>
                  <el-button
                    type="primary"
                    v-if="['2', '5'].includes(item.orderStatus)"
                    @click="open(item, 'quote')"
                  >
                    {{ t('userCenter.b7') }}
                  </el-button>
                  <el-button
                    v-if="isCreator(item)"
                    type="primary"
                    @click="handleAuth(item)"
                  >
                    {{ t('userCenter.b11') }}
                  </el-button>
                  <!-- 编辑中的、是创建人的 才可删除 -->
                  <el-popconfirm
                    v-if="['0'].includes(item.orderStatus) && isCreator(item)"
                    :title="t('popconfirm_del')"
                    @confirm="handleDelete(item)"
                  >
                    <template #reference>
                      <el-button type="primary">
                        {{ t('delete') }}
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </div>
          </div>

          <div class="flexcc mt-3">
            <el-pagination
              layout="prev, pager, next"
              :hide-on-single-page="total <= page.pageSize"
              :total="total"
              v-model:current-page="page.pageNum"
              :page-size="page.pageSize"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 授权查看人 -->
    <AuthView
      v-if="authViewDialog"
      v-model="authViewDialog"
      :obj-id="objId"
      obj-table="shcw_procure_order"
    />

    <!-- 邀请报价记录 -->
    <QuotationRecord
      v-if="quotationRecordDialog"
      v-model="quotationRecordDialog"
      :orderId="objId"
      type="procurement"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { procureOrderListApi, deleteApi } from '@/service/procurement'
import { shippingListApi } from '@/service/shipping'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import { dateFormat, openUrl } from '@/utils/index'
import useDict from '@/hooks/useDict'
import useLogin from '@/stores/login'
import AuthView from '@/components/AuthView.vue'
import QuotationRecord from './QuotationRecord.vue'

const { dictData, getDictData, getDictLabel } = useDict()

const router = useRouter()
const route = useRoute()
const storeLogin = useLogin()

watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

// 查询
const searchData = ref({})
const shipOptions = ref([])
const getShippingList = () => {
  shippingListApi().then(({ rows }) => {
    shipOptions.value = rows.map((r) => {
      return {
        value: r.id,
        label: r.shippingName
      }
    })
  })
}
const handleSearch = () => {
  page.value.pageNum = 1
  if (searchData.value.shipId) {
    searchData.value.shipList = [searchData.value.shipId]
  }
  getList()
}
const handleReset = () => {
  page.value.pageNum = 1
  searchData.value = {}
  getList()
}

// 采购单列表
const listData = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 6 // 每页条数
})
const total = ref(0) // 总数
const getList = () => {
  procureOrderListApi(page.value, searchData.value).then(({ rows, total: t }) => {
    rows.forEach((item) => {
      //  0编辑中，2询价中，5已完成
      const colorObj = {
        0: 'blue',
        2: 'yellow',
        5: 'red'
      }
      item.orderStatusClass = colorObj[item.orderStatus]
    })
    listData.value = rows
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

//
const open = (item, type) => {
  if (type === 'view') {
    openUrl('/user/procurementDetail', { id: item.id })
  }
  if (type === 'edit') {
    openUrl('/procurement', { id: item.id, type: 'edit', projectLargeId: item.projectLargeId })
  }
  if (type === 'inquiry') {
    openUrl('/procurement', { id: item.id, type: 'inquiry', projectLargeId: item.projectLargeId })
  }
  if (type === 'quote') {
    openUrl('/user/priceSheet', { type: 'procurement', relationOrderNo: encodeURIComponent(item.orderNo) })
  }
}

// 邀请报价记录
const quotationRecordDialog = ref(false)
const viewQuotationRecord = ({ id }) => {
  quotationRecordDialog.value = true
  objId.value = id
}

// 删除
const handleDelete = ({ id }) => {
  deleteApi(id).then(() => {
    getList()
  })
}

// 授权查看人
const objId = ref(null)
const authViewDialog = ref(false)
const handleAuth = ({ id }) => {
  authViewDialog.value = true
  objId.value = id
}
const isCreator = ({ createBy }) => {
  return createBy === storeLogin?.userInfo?.id
}

//
const init = async () => {
  getShippingList()
  await getDictData('order_status')
  getList()
}
</script>

<style scoped lang="scss">
.procurement {
  .el-button {
    min-width: 140px;
  }
  .body {
    padding: 30px 0 70px;
    background: #f5f5f5;
    margin-bottom: -76px;

    .main {
      background: #fff;
      padding: 25px 35px;
      .title {
        border-bottom: 2px solid #212121;
        padding-bottom: 20px;
        text-transform: uppercase;
        font-weight: bold;
        color: var(--mainColor);
        div {
          font-size: 20px;
        }
      }
      .search {
        margin-top: 25px;
        .item {
          width: 200px;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
